import globalData from '@/assets/js/common'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import Product from '@views/box/workbench/fashioner/module/product'
import KonvaImg from '../components/KonvaImg'
import { addCondition, queryBatchProductSkcMatted, matchCreate, finishBy, selectGoodsList } from '@api/box/boxLook'
import { querySysCateTree } from '@api/box/api'
const columns = [
  {
    title: '序号',
    width: 60,
    customRender: (text, record, index) => `${index + 1}`
  },
  {
    title: '商品',
    // width: 250,
    scopedSlots: { customRender: 'product' }
  },
  {
    title: '操作',
    align: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export const lookEditMixin = {
  components: {
    Product,
    JImageUpload,
    KonvaImg
  },
  data () {
    return {
      columns,
      arcList: [],
      bigList: [],
      smallList: [],
      seasonList: [],
      yearList: [],
      bandList: [],
      konvaImgVisible: false,
      visible: false,
      productList: [],
      createStylingList: [],
      fashionerList: [],
      tags: {},
      scene: {},
      selectedRowKeys: [],
      brandList: [],
      spinning: false,
      createImgFlag: false,
      labelCol: { span: 2 },
      wrapperCol: { span: 18 },
      levelInfo: [
        {
          key: '未评级',
          value: '99'
        },
        {
          key: 'S级',
          value: '10'
        },
        {
          key: ' A级',
          value: '20'
        },
        {
          key: ' B级',
          value: '30'
        }
      ],
      changeName: '', //
      changePerson: '',
      videoList: [],
      imgList: [],
      informationlist: [
        { title: '通用参数', herf: '#components' },
        { title: '个性参数', herf: '#anchor' }
      ],
      lookId: '', // lookID
    }
  },
  beforeRouteLeave (to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    // 查询商品接口
    getList (list) {
      const data = {
        // page: {
        //   pageNo: 1,
        //   pageSize: 100
        // },
        requestData: {
          // isAddTrolley: 0,
          // isStockNotEmpty: 1,
          names: list
          // storeId: '417608-31066',
          // sorted: 0
        }
      }
      selectGoodsList(data).then(res => {
        if (res.code === 0) {
          let brandInfo = res.data.map(e => {
            const newItem = {
              key: e.c_arcbrand_id,
              value: e.brand
            }
            return newItem
          })
          let yearList = res.data.map(e => {
            const newItem = {
              key: e.year,
              value: e.year
            }
            return newItem
          })
          let bigList = res.data.map(e => {
            const newItem = {
              key: e.m_big_category_id,
              value: e.m_big_category
            }
            return newItem
          })
          let smallList = res.data.map(e => {
            const newItem = {
              key: e.m_small_category_id,
              value: e.m_small_category
            }
            return newItem
          })
          let seasonList = res.data.map(e => {
            const newItem = {
              key: e.small_season_id,
              value: e.small_season
            }
            return newItem
          })
          let bandList = res.data.map(e => {
            const newItem = {
              key: e.m_band,
              value: e.m_band
            }
            return newItem
          })
          this.arcList = this.objReduce(brandInfo) // 品牌
          this.bigList = this.objReduce(bigList) //大类
          this.seasonList = this.objReduce(seasonList) //季节
          this.yearList = this.objReduce(yearList) // 年份
          this.smallList = this.objReduce(smallList) // 小类
          this.bandList = this.objReduce(bandList) // 波段
          res.data.forEach(item => {
            // console.log(item, 'item')
            this.productList.forEach(info => {
              if (item.colorno == info.colorno) {
                info.m_small_category = item.m_small_category
                info.m_big_category = item.m_big_category
                info.small_season = item.small_season
              }
            })
          })
        }
      })
    },
    // 标签
    getSysCateTree () {
      querySysCateTree('B08')
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            let data = JSON.parse(JSON.stringify(result))
            data.splice(1, 2)
            this.tags = data
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 处理回显信息
    handleDetail (res) {
      console.log(res.data, '回显信息')
      this.lookId = res.data.look.id
      // this.form.gender = res.data.look.gender + ''
      this.form.level = res.data.look.level + ''
      // this.form.isCreateBill = res.data.look.isCreateBill == '1' ? res.data.look.isCreateBill.toString() : '0'
      // console.log(this.form.isCreateBill, 'this.form.isCreateBill')

      let imgList = res.data.galleryList && res.data.galleryList.length > 0 ? res.data.galleryList.filter(item => item.type === 0).map(item => item.url) : [] //图片
      let videoList = res.data.galleryList && res.data.galleryList.length > 0 ? res.data.galleryList.filter(item => item.type === 1).map(item => item.url) : [] //视频
      this.imgList = imgList || []
      this.videoList = videoList || []
      this.productList = res.data.productList.map(e => {
        return {
          brand: e.productBrand,
          c_arcbrand_id: e.arcBrandId,
          name: e.productCode,
          value: e.productName,
          color_name: e.productColorName,
          colorno: e.productColor,
          id: e.productId,
          imgurl: e.productImage,
          m_small_category_id: e.smallCategory,
          m_band: e.productBand,
          m_big_category_id: e.bigCategory,
          small_season_id: e.season,
          year: e.years
        }
      })
      this.form.labelList = res.data.lookLabelList && res.data.lookLabelList.length > 0 ? res.data.lookLabelList : []
      this.match.name = res.data.look.name ? res.data.look.name : ''
      this.match.matchAbout = res.data.look.briefIntroduction ? res.data.look.briefIntroduction : ''

    },
    anchorClick (e) {
      e.preventDefault()
    },
    gerGood () {
      return document.getElementById('goods')
    },
    handleTagChange (tag, checked) {
      const { labelList } = this.form
      const nextSelectedTags = checked ? [...labelList, tag] : labelList.filter(t => t !== tag)
      this.form.labelList = nextSelectedTags
    },
    handleTag (tag, checked) {
      const { sceneList } = this.form
      const nextSelectedTags = checked ? [...sceneList, tag] : sceneList.filter(t => t !== tag)
      this.form.sceneList = nextSelectedTags
    },
    filterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    // 上传图片
    getUploadParams () {
      return { ...globalData.uploadParams }
    },
    handleCreateImg () {
      if (this.selectedRowKeys.length < 1) {
        this.$message.error('至少选一件！')
        return
      }
      if (this.selectedRowKeys.length > 3) {
        this.$message.error('最多只能选择三件！')
        return
      }
      const productList = this.selectedRowKeys.map(e => JSON.parse(e))
      const productColors = productList.map(item => {
        return {
          colorNo: item.colorno,
          productId: item.id
        }
      })
      const data = {
        requestData: {
          productColors: productColors
        }
      }
      this.createImgFlag = true
      queryBatchProductSkcMatted(data)
        .then(res => {
          if (res.code == 0) {
            const list = res.data
            this.createStylingList = list
            this.createImgFlag = false
            this.konvaImgVisible = true
          } else {
            this.createImgFlag = false
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleAddProduct (v) {
      let ids = this.productList.map(e => e.id + e.colorno)
      if (ids.includes(v.id + v.colorno)) {
        this.$message.error('不可重复添加相同的商品！')
        return
      }
      this.productList.push(v)

      let brandInfo = this.productList.map(e => {
        const newItem = {
          key: e.c_arcbrand_id,
          value: e.brand
        }
        return newItem
      })
      let yearList = this.productList.map(e => {
        const newItem = {
          key: e.year,
          value: e.year
        }
        return newItem
      })
      let bigList = this.productList.map(e => {
        const newItem = {
          key: e.m_big_category_id,
          value: e.m_big_category
        }
        return newItem
      })
      let smallList = this.productList.map(e => {
        const newItem = {
          key: e.m_small_category_id,
          value: e.m_small_category
        }
        return newItem
      })
      let seasonList = this.productList.map(e => {
        const newItem = {
          key: e.small_season_id,
          value: e.small_season
        }
        return newItem
      })
      let bandList = this.productList.map(e => {
        const newItem = {
          key: e.m_band,
          value: e.m_band
        }
        return newItem
      })
      this.arcList = this.objReduce(brandInfo)
      this.yearList = this.objReduce(yearList)
      this.bigList = this.objReduce(bigList)
      this.smallList = this.objReduce(smallList)
      this.seasonList = this.objReduce(seasonList)
      this.bandList = this.objReduce(bandList)
    },
    // 去重
    objReduce (arr) {
      let obj = {}
      arr = arr.reduce((item, next) => {
        obj[next.key] ? '' : (obj[next.key] = true && item.push(next))
        return item
      }, [])
      return arr
    },
    handleDeleteProduct (record, index) {
      this.productList.splice(index, 1)
      let falg = this.productList.some(item => {
        return item.c_arcbrand_id == record.c_arcbrand_id
      })
      if (!falg) {
        this.arcList = this.arcList.filter(item => {
          return item.key != record.c_arcbrand_id
        })
      }
      let falg1 = this.productList.some(item => {
        return item.year == record.year
      })
      if (!falg1) {
        this.yearList = this.yearList.filter(item => {
          return item.key != record.year
        })
      }

      let falg2 = this.productList.some(item => {
        return item.m_big_category_id == record.m_big_category_id
      })
      if (!falg2) {
        this.bigList = this.bigList.filter(item => {
          return item.key != record.m_big_category_id
        })
      }

      let falg3 = this.productList.some(item => {
        return item.m_small_category_id == record.m_small_category_id
      })
      if (!falg3) {
        this.smallList = this.smallList.filter(item => {
          return item.key != record.m_small_category_id
        })
      }
      let falg4 = this.productList.some(item => {
        return item.small_season_id == record.small_season_id
      })
      if (!falg4) {
        this.seasonList = this.seasonList.filter(item => {
          return item.key != record.small_season_id
        })
      }

      let falg5 = this.productList.some(item => {
        return item.m_band == record.m_band
      })
      if (!falg5) {
        this.bandList = this.bandList.filter(item => {
          return item.key != record.m_band
        })
      }
    },
    fileImageChange (list) {
      this.form.imgList = list
    },
    fileVideoChange (list) {
      this.form.videoList = list
    },
    getCondition () {
      addCondition()
        .then(res => {
          this.spinning = false
          if (res.code === 0) {
            const { arcBrand, fashioner, matchGender, tags } = res.data
            this.brandList = arcBrand
            this.fashionerList = fashioner

            this.genderList = matchGender.map(e => {
              return {
                label: e.name,
                value: e.code,
                default: e.default
              }
            })
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          this.spinning = false
        })
    },
    // 保存
    preservSave () {
      let status = 0
      this.preservation(status)
    },
    // 保存并应用
    application () {
      let status = 1
      this.preservation(status)
    },
  }
}